<template>
    <div class="StatisticsSiderRight">
        <common-border-large width="100%" text="能耗监测" height="73%">
            <div class="content_1">
                <CustomStatisticsSiderRightEnergyConsumption></CustomStatisticsSiderRightEnergyConsumption>
            </div>
            <div class="content_2">
            <CustomStatisticsSiderRightEnergyGrowthRate></CustomStatisticsSiderRightEnergyGrowthRate>
            </div>
            <div class="content_3">
                <CustomStatisticsSiderRightEnergyConsumptionCategory></CustomStatisticsSiderRightEnergyConsumptionCategory>
            </div>
        </common-border-large>
        <common-border-large width="100%" text="监测点统计" class="monitoring_points">
            <CustomStatisticsSiderRightMonitoringPoint></CustomStatisticsSiderRightMonitoringPoint>
        </common-border-large>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.StatisticsSiderRight {
    height: 100%;
    .monitoring_points{
        height: calc(27% - 10px);
        margin-top: 10px;
    }
    .content_1{
        height: 24%;
    }
    .content_2{
        height: 42%;
    }
    .content_3{
        height: 30%;
    }
}
</style>
